<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>TestEdge</title>

		<!--knockout mapping library -->

		<!--[if IE]>
		<link rel="stylesheet" type="text/css" href="/ce-static-testedge/common/css/style_IE.css" />
		<script type="text/javascript" src="/ce-static-testedge/common/jscripts/jquery.placeholder.min.js"></script>
		<script>
		$(function() {
		$('input, textarea').placeholder();
		});
		</script>
		<![endif]-->
		<!--[if IE 8]>
		<link rel="stylesheet" type="text/css" href="/ce-static-testedge/common/css/style_IE_8.css" />
		<![endif]-->

		<style>
			.subSubjectTriangle {
				width: 0px;
				height: 0px;
				border-style: solid;
				border-width: 10px 7.5px 0 7.5px;
				border-color: #666666 transparent transparent transparent;
			}

		</style>

	</head>

	<body>

		<!--BO Main Content -->
		<div class="contentWrapper">
			<div class="wrapper">
				<div class="testEdgeMainContent">
					<h1 class="titleMain" style="margin-bottom: -24px">Curriculum Plans: <span data-bind="text: sectionTitle"></span><span class="floatleft" id="aypTitle"></span><a href="#."  onclick="showHelp(event)" style="margin-top: 10px; margin-right: 13px"  class="iconHelp seletc floatright"></a></h1>
					<!--div class="marginRight20 marginLeft20"-->
					<div  class="help"></div>
					<a class="floatright" href="#" style="margin-right: 10px" data-bind="click: backToAcademicYear"> &lt; Back to Academic Year</a>

					<!--/div-->
					<div class="titleSection">
						<div class="yearSelection">
							<label class="floatleft"><b>Grade:</b></label>
							<select class="select floatleft width210" data-bind="options: gradeArr, optionsText: 'gradeName',value: selectedGrade" ></select>
						</div>

						<!--div class="floatleft notificationBoxHeading padding5 " style="padding-right: 5px; float: left; margin-left: 20px; width: 400px">

						<span class="subtext_title" data-bind="text:grade1">Grade</span>
						<span class="subtext_title">has maximum</span>
						<span class="subtext_title" style="font-weight: bold" data-bind="text:totalAcademicPeriods"></span>
						<span class="subtext_title">number of periods per week</span>
						</div-->

						<div class="clearBoth"></div>
						<br>
					</div>
					<!--//----------------------------------------------------------------------------------------------------------->

					<div class="paddingBottom40Top2" style="margin-left: 20px" >
						<!--BO Notification -->
						<div class="floatleft notificationBoxHeadingDailyLog notificationBoxBorder">
							<div class="floatleft marginTop5">
								<span class="bold">Notifications</span>
							</div>
							<div>
								<div style="margin-top: 3px;" class="smallwrap floatleft">

								</div>
							</div>
							<div class="floatleft marginTop5">
								<span class="redText"></span>
							</div>
						</div>
						<div class="width20 floatleft"></div>
						<!-- 2nd box -->
						<div class="floatleft notificationBoxContentDailyLog notificationBoxBorder" style="width: 790px;">

							<div class="floatleft marginTop5">
								<span class="redText" data-bind="text:grade1">Grade</span>
								<span class="subtext_title">has maximum</span>
							</div>
							<div>
								<div style="margin-top: 3px;" class="smallwrap floatleft">
									<div class="eventCircle autoCursor">
										<span  style="vertical-align: sub" data-bind="text:totalAcademicPeriods"></span>
									</div>
								</div>
							</div>

							<div class="floatleft marginTop5">
								<span class="subtext_title">&nbsp; periods per week of which </span>
							</div>

							<div>
								<div style="margin-top: 3px;" class="smallwrap floatleft">
									<div class="eventCircle autoCursor">

										<span   style="vertical-align: sub" data-bind="text:totalPeriods"></span>
									</div>
								</div>
							</div>
							<div class="floatleft marginTop5">
								<span >&nbsp;periods allocated	.</span>
							</div>
						</div>
						<!--EO Notification  -->
					</div>

					<!--//----------------------------------------------------------------------------------------------------------->

					<div class="scroll-pane9 padding20">

						<!--div id="accordion"-->
						<h1  >Core Subjects:</h1>
						<div class="gradeData" style="margin-top:10px">
							<table border="1" class="schoolEventstable">
								<thead>
									<tr class="border-bottom">
										<th class="header" style="width:70px; font-size: 12px;">Subject <br> <br> &nbsp; </th>
										<th class="header" style="width:70px; font-size: 12px;">Periods <br> <br> (per week)</th>
										<th class="header" style="width:70px; font-size: 12px;">ClassEdge Periods <br> <br> (per week)</th>
										<th class="header" style="width:70px; font-size: 12px;">Labs <br> <br> (per week)</th>
										<th class="header" style="width:600px; font-size: 12px;">Teacher Responsible for Curriculum Plan <br> <br> &nbsp;</th>
									</tr>
								</thead>
								<script type="text/html" id="ctemplate">
									<!-- ko if: subType === '1' -->
									<tr>
										<td style="font-size: 12px;" data-bind="text: subjectTitle"></td>
										<td><input data-bind="value: periodPerWeek" type="text" class="width120" placeholder="Type.." /></td>
										<td><input data-bind="value: cePeriodPerWeek" type="text" class="width120" placeholder="Type.." /></td>
										<td><input data-bind="value: labPeriodPerWeek" type="text" class="width120" placeholder="Type.." /></td>
										<td><input data-bind="value: ownerTeacherName,jqAuto: {}" type="text" class="width210 floatleft spacing sugges tags" placeholder="Enter teacher’s name "/></td>
									</tr>
									<!-- /ko -->
								</script>
								<!--td data-bind="text: totalPeriods"></td-->
								<tbody data-bind="foreach: subjects">
									<!--Core Subjects: foreach: subjects: subType : -->
									<!-- <div data-bind="text: subType()"></div> -->
									<!-- ko if: subType() == "1"  -->
										<!-- ko if: isSubsubject()==1 -->
										<tr>
											<td  style="font-size: 12px; background-color: #EBEBEB" data-bind="text: subjectTitle">
											</td>
											<td  style="background-color: #EBEBEB">
												<input data-bind="value: periodPerWeek" type="text" class="width120" placeholder="Type.." />
											</td>
											<td  style="background-color: #EBEBEB">
												<input data-bind="value: cePeriodPerWeek" type="text" class="width120" placeholder="Type.." />
											</td>
											<td  style="background-color: #EBEBEB">
												<input data-bind="value: labPeriodPerWeek" type="text" class="width120" placeholder="Type.." />
											</td>
											<td  style="background-color: #EBEBEB">
												<!--input data-bind="value: ownerTeacherName,jqAuto: {}" type="text" class="width210 floatleft spacing sugges tags" placeholder="Enter teacher’s name "/-->
												<select class="select width210" data-bind="options: filteredTeacherArr, optionsText: 'fullName', optionsValue:'userId',value:ownerTeacherId"></select>
											</td>
										</tr>
										<!-- /ko -->
										<!-- ko if: isSubsubject()==0 && hasSubSubjects()!=-1 -->
										<tr >
											<!-- ko if: hasSubSubjects()==1 -->
											<td style="font-size: 12px;" >
												<div><span data-bind="text: subjectTitle" style="display: block"> </span> </div>
												<div style="position:absolute;margin-top: 20px" > <span class="subSubjectTriangle"></span>
												</div>
											</td>
											<!-- /ko -->
	
											<!-- ko if: hasSubSubjects()==0 -->
												<td style="font-size: 12px;" data-bind="text: subjectTitle" ></td>
											<!-- /ko -->
	
											<td>
												<!-- ko if: hasSubSubjects()==0 -->
												<input data-bind="value: periodPerWeek" type="text" class="width120" placeholder="Type.." />
												<!-- /ko -->
											</td>
											<td><!-- ko if: hasSubSubjects()==0 -->
												<input data-bind="value: cePeriodPerWeek" type="text" class="width120" placeholder="Type.." />
												<!-- /ko -->
											</td>
											<td>
												<!-- ko if: hasSubSubjects()==0 -->
												<input data-bind="value: labPeriodPerWeek" type="text" class="width120" placeholder="Type.." />
												<!-- /ko -->
											</td>
											<td>
												<!-- ko if: hasSubSubjects()==0 -->
												<!--input data-bind="value: ownerTeacherName,jqAuto: {}" type="text" class="width210 floatleft spacing sugges tags" placeholder="Enter teacher’s name "/-->
												<select class="select width210" data-bind="options: filteredTeacherArr, optionsText: 'fullName', optionsValue:'userId',value:ownerTeacherId"></select>
												<!-- /ko -->
											</td>
	
										</tr>
	
										<!-- /ko -->

										<!-- ko if: isSubsubject()==0 && hasSubSubjects()==-1 -->
	
										<tr>
											<td style="font-size: 12px;"  colspan="5">
											<div> <span style="text-align: center" data-bind="text: subjectTitle" > </span>
												<!-- ko if: hasSubSubjects()==-1 -->
												<span style="color: orange" > (Optional)</span>
												<!-- /ko -->
											</div>
											<div style="position:absolute;margin-top: 20px" >
												<span class="subSubjectTriangle"></span>
											</div></td>
										</tr>
	
										<!-- /ko -->

									<!-- /ko -->
								</tbody>
							</table>
						</div>

						<h1  id="coheader" style="margin-top:10px;">Co-Curricular Subjects:</h1>
						<div id="cocurrDiv "class="gradeData1" style="margin-top:10px;">
							<table border="1" class="schoolEventstable" style="width:430px">
								<thead>
									<tr class="border-bottom">
										<th class="header" style="width:70px; font-size: 12px;">Subject
										<br>
										<br>
										&nbsp;</th>
										<th class="header" style="width:70px; font-size: 12px;">Periods
										<br>
										<br>
										(per week)</th>

									</tr>
								</thead>

								<script type="text/html" id="ctemplate1">
									<tr>
									<td style="font-size: 12px;" data-bind="text: subjectTitle"></td>
									<td><input data-bind="value: periodPerWeek" type="text" class="width120" placeholder="Type.." /></td>

									<!-- <td data-bind="text: totalPeriods"></td>
									<td data-bind="text: totalSessions"></td> -->
									</tr>
								</script>
								<!--td data-bind="text: totalPeriods"></td-->
								<tbody data-bind="foreach: subjects">
									<!-- Co-Curricular Subjects: foreach: subjects: subType :   -->
									<!-- ko if: subType() == "3" -->
									<!-- ko if: isSubsubject()==1 -->
									<tr>
										<!-- BO EDIT -->
										<!-- ko if: isSubjectOptional() -->
											<td style="font-size: 12px; background-color: #EBEBEB">
												<span data-bind="text: subjectTitle"></span>
												<span style="color: orange"> (Optional)</span>
											</td>
											<td style="background-color: #EBEBEB">
												<input data-bind="value: periodPerWeek" type="text" class="width120" placeholder="Type.." />
											</td>
										<!-- /ko -->
										<!-- ko ifnot: isSubjectOptional() -->
										<td style="font-size: 12px"  data-bind="text: subjectTitle">
											
										</td>
										<td>
											<input data-bind="value: periodPerWeek" type="text" class="width120" placeholder="Type.." />
										</td>
										<!-- /ko -->
									</tr>
									<!-- /ko -->
									<!-- ko if: isSubsubject()==0 -->
									<tr>
										<td style="font-size: 12px;"  data-bind="text: subjectTitle" ></td></span></td>
										<td>
											<!-- ko if: hasSubSubjects()==0 -->
											<input data-bind="value: periodPerWeek" type="text" class="width120" placeholder="Type.." />
											<!-- /ko -->
										</td>
									</tr>
									<!-- /ko -->
									<!-- /ko -->
								</tbody>
							</table>
						</div>
					</div>
					<div class="bottomButton marginRight" id="buttonsContainer">
						<a  id="saveButton" class="te-button buttonBlue floatleft" >Save</a>
						<a href="#" id="cancelButton" class="te-button buttonGray floatleft" >Cancel</a>
						<!-- <a href="#" class="te-button buttonGray floatright" data-bind="click: backToAcademicYear, visible:false">Back to Academic Year 2013-2014</a> -->
						<div class="clearBoth"></div>
					</div>
				</div>
			</div>
			<div id="dialog-alert" title="Alert !">

				<div class="sectionContainer">

					<p id="confirmationText2" style="margin-left: 2px;" ></p>
				</div>
				<div class="bottomButton">

					<a href="#"  class="te-button buttonBlue floatleft" id="abc" style="margin-left: 175px;">OK</a>

					<div class="clearBoth"></div>
				</div>

			</div>
		</div>
		<!--EO Main Content -->

		<!--BO Edit-->
		<link rel="stylesheet" type="text/css" href="/ce-static-testedge/common/css/jquery.loader.css" />
		<link rel="stylesheet" type="text/css" href="/ce-static-testedge/common/css/jquery-ui.css" />
		<link rel="stylesheet" type="text/css" href="/ce-static-testedge/common/css/style_testEdge.css" />
		<link rel="stylesheet" type="text/css" href="/ce-static-testedge/common/css/style_testEdge_custom.css" />
		<link rel="stylesheet" type="text/css" href="/ce-static-testedge/common/css/jquery.jscrollpane.css" />

		<script type="text/javascript" src="/ce-static-testedge/common/jscripts/head.load.min.js"></script>
		<!--EO Edit-->

		<!--BO Edit-->
		<script>
			// load scripts by assigning a label for them
			head.js({
				jscrollpane : "/ce-static-testedge/common/jscripts/jquery.jscrollpane.min.js"
			}, {
				mousewheel : "/ce-static-testedge/common/jscripts/jquery.mousewheel.js"
			}, {
				jqueryloader : "/ce-static-testedge/common/jscripts/jquery.loader.js"
			}, {
				tablesorter : "/ce-static-testedge/common/jscripts/jquery.tablesorter.min.js"
			}, {
				teacher_common : "/ce-static-testedge/common/jscripts/common_curriculam.js"
			}, {
				teacher_currplanchapter_main : "/ce-static-testedge/ayp/jscripts/ayp_curriculamplancontroller.js"
			}, function() {
				// all done
				console.log("2014-01-08 All Done..............................");

			});

		</script>

		<script type='text/javascript' src="/ce-static-testedge/common/jscripts/jquery-1.8.2.min.js"></script>
		<script type='text/javascript' src="/ce-static-testedge/common/jscripts/jquery-ui.js"></script>
		<!-- knockout -->
		<script type='text/javascript' src="/ce-static-testedge/common/jscripts/knockout-2.2.1.js"></script>
		<script type="text/javascript" src="/ce-static-testedge/common/jscripts/knockout.mapping-latest.js"></script>
		<script type="text/javascript" src="/ce-static-testedge/common/jscripts/knockout.validation.js"></script>

		<!--EO Edit-->

	</body>
</html>
